<extend name="Public/base"/>
<block name="style" >
    <link rel="stylesheet" href="__STATIC__/styles/vendors/bootstrap-table.css">
    <!-- <link rel="stylesheet" href="__STATIC__/styles/contact_manage.css"> -->
    <link rel="stylesheet" href="__STATIC__/styles/user_manage.css">
    <link rel="stylesheet" href="__STATIC__/styles/vendors/bootstrap-select.min.css">
    <link rel="stylesheet" href="__STATIC__/plugins/dropper/jquery.fs.dropper.min.css">
    <style type="text/css">
        #apk_file .bar {
            background: #eceff1;
            content: '';
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            width: 0;
            z-index: 0;
            -webkit-transition: width 0.1s linear;
            transition: width 0.1s linear;
        }
        span .file , span .proess{
            position: relative;
            line-height: 34px;
            color: #777;
            z-index: 1;
            font-size: 12px;
            padding-left: 20px;
        }
        span .proess{
            color: #B0BEC5;
            float: right;
            font-size: 10px;
            text-transform: uppercase;
        }
        label.error {
            color: red;
            position: absolute;
            top: 0px;
            left: 28px;
            filter: alpha(opacity=50);
            -moz-opacity: 0.5;
            -khtml-opacity: 0.5;
            opacity: 0.5;
        }
        div#apk_layer {
            margin-bottom: 20px;
        }
    </style>
</block>
<block name="content">

    <div id="table-container">
        <div id="toolbar">
            <button id="remove" class="btn btn-danger btn-flat" disabled>
                <i class="glyphicon glyphicon-remove"></i>删除
            </button>
            <button id="import" class="btn btn-primary btn-flat">新增版本</button>
        </div>

        <table id="table" data-toolbar="#toolbar" data-search="true"></table>
    </div>

<div class="modal fade" id="complex_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
        <div class="modal-dialog " role="document">
            <form id="createVersion" class="modal-content" method="post" action="{:U('createVersion')}">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">添加版本</h4>
                </div>

                <div class="modal-body">

                    <div class="control-group row hidden">
                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 left">
                            <label class="control-label" for="version_code">系统版本号:</label>
                        </div>
                        <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 right">
                            <div class="controls">
                                <input type="text" class="form-control" id="version_code" name="version_code">
                            </div>
                        </div>
                    </div>

                    <div class="control-group row hidden">
                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 left">
                            <label class="control-label" for="isMandatoryUpgrade">是否强制升级:</label>
                        </div>
                        <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 right">
                            <div class="controls">
                                <select name="isMandatoryUpgrade" id="isMandatoryUpgrade" class="form-control">
                                    <option value="0" >否</option>
                                    <option value="1" selected="selected">是</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="control-group row hidden">
                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 left">
                            <label class="control-label" for="versionName">APP显示名称:</label>
                        </div>
                        <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 right">
                            <div class="controls">
                                <input type="text" class="form-control" id="versionName" name="versionName">
                            </div>
                        </div>
                    </div>

                    <div class="control-group row " id="apk_layer">
                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 left">
                            <label class="control-label" >APK文件:</label>
                        </div>
                        <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 right">
                            <div class="controls">
                                <div id="apk_div" class="col-sm-5" style="padding-left: 0px;">
                                    <input type="hidden" id="downloadPath" name="downloadPath" value="">

                                    <div class="image_handle" data-toggle="tooltip" data-placement="top"
                                         title=""
                                         data-original-title="点击上传或拖入上传">
                                        <div class="dropped"></div>
                                    </div>
                                </div>
                                <div class="col-sm-10" style="padding-left:0px; margin-top: 10px; clear: left;">
                                    <div id="apk_file"></div>
                                </div>
                                <div class="col-sm-2">
 <a href="javascript:void(0)" id="removeImg" class="btn btn-info invisible" style="margin-top: 10px;"
                                               role="button">删除</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="control-group row">
                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 left">
                            <label class="control-label" for="upgradeInstructions">描述:</label>
                        </div>
                        <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 right">
                            <div class="controls">
                                <textarea class="form-control" id="upgradeInstructions" name="upgradeInstructions"></textarea>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary btn-flat">确定</button>
                    <button type="button" class="btn btn-default btn-flat" data-dismiss="modal">取消</button>
                </div>
            </form>
        </div>
    </div>

    <div class="modal fade" id="confirm_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">确认</h4>
                </div>
                <div class="modal-body">
                    确定要删除吗?
                </div>
                <div class="modal-footer">
                    <button type="button" id="commonDel" class="btn btn-danger btn-flat">删除</button>
                    <button type="button" class="btn btn-default btn-flat" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
</block>
<block name="script">
    <script src="__STATIC__/scripts/vendors/bootstrap-select.min.js"></script>
    <script src="__STATIC__/scripts/vendors/bootstrap-table.js"></script>
    <script src="__STATIC__/plugins/dropper/jquery.fs.dropper.min.js"></script>
    <script src="__STATIC__/scripts/vendors/bootstrap-treeview.min.js"></script>
    <script src="__STATIC__/scripts/vendors/fileinput.min.js"></script>
    <script src="__STATIC__/scripts/vendors/jquery.form.min.js"></script>
    <script>


    var $table = $('#table');

    var $confirmDel = $('#commonDel');
    var $complex_modal = $('#complex_modal');


    //上传操作
    function initDropper(){
        $('#apk_div .dropped').dropper({
            postKey: "file",
            action: "{:U('File/uploadApk')}",
            postData: {thumbSizes: '320x480', is_maillist:1},
            label: "点击或拖入文件",
            maxSize: 1073741824,
        }).on("fileComplete.dropper", onFileComplete)
                .on("fileError.dropper", onFileError)
                .on("fileProgress.dropper", onFileProgress);

        $('#removeImg').on("click",clearImageView );
    }
    function onFileComplete(e, file, response) {
        if(response.status == 0){
            layer.msg(response.info,{time:4000});
            clearImageView();
        }else{
            $('#version_code').val(response.code);
            $('#versionName').val(response.descrip);
            $('#')
            viewImageTointro(response.savepath);
            layer.msg("上传成功！");
        }        
    }
    function onFileProgress(e, file, percent) {
        $file = $('#apk_file');
        $file.html('<span slass="content"><span class="file">' + file.name + '</span><span class="proess">Queued</span></span><span class="bar"></span>');
        $file.find(".proess").text(percent + "%")
        $file.find(".bar").css("width", percent + "%");
    }
    function onFileError(e, file, error) {
        layer.msg(error);
    }
    function viewImageTointro(apk) {
        if (apk) {
            var root = "{:C('APK_LOAD_PATH')}";
            var apkpath = root + apk;
            $("#apk_div").find(".dropper-input").val("");
            $("#apk_div").find(".image_handle").hide();
            $("#downloadPath").val(apkpath);
            $("#removeImg").removeClass('invisible');
        }
    }
    function clearImageView() {
        $("#downloadPath").val("");
        $("#apk_div").find(".image_handle").show();
        $("#apk_div").find(".dropper-input").val("");
        $("#apk_layer #apk_file").html("");
        $("#removeImg").addClass('invisible');
    }
    // 上传 end
    // 初始化table
    var TableInit = function(){

        var oTableInit =new Object();

        oTableInit.selections = [];

        oTableInit.groupSelections = [];

        oTableInit.init = function(){
            $table.bootstrapTable({
                formatLoadingMessage: function(){
                    return '正在努力加载数据中，请稍后......';
                },
                formatRecordsPerPage:function(pageNumber){
                    return '每页显示 ' + pageNumber + ' 条记录';
                },
                formatShowingRows: function (pageFrom, pageTo, totalRows) {
                    return '显示第 ' + pageFrom + ' 到第 ' + pageTo + ' 条记录，总共 ' + totalRows + ' 条记录';
                },
                formatSearch: function () {
                    return '版本号搜索';
                },
                formatNoMatches: function () {
                    return '没有找到匹配的记录';
                },
                formatPaginationSwitch: function () {
                    return '隐藏/显示分页';
                },
                formatRefresh: function () {
                    return '刷新';
                },
                formatToggle: function () {
                    return '切换';
                },
                formatColumns: function () {
                    return '列';
                },
                url:"{:U('versionsList')}",
                method:'get',
                striped:true,
                cache:false,
                pagination:true,
                sortable:false,
                sortOrder:'asc',
                sidePagination:'server',
                queryParams:oTableInit.mailListQueryParams,
                pageNumber:1,
                pageSize:10,
                pageList:[10,20,50],
                uniqueId:'version_upgrade_id',
                search:true,
                height:getHeight(),

                columns:[
                {
                    field:'state',
                    checkbox:true,
                    align:'center'
                },
                {
                    field:'version_upgrade_id',
                    title:'序号',
                    visible:false
                },
                {
                    field:'version_code',
                    title:'系统版本号'
                },
                {
                    field:'versionname',
                    title:'APP显示名称'
                },
                {
                    field:'ismandatoryupgrade',
                    title:'是否强制升级',
                    formatter:function (value){
                         value= value == 0 ? '否' : '是';
                        return value;
                    },
                },
                {
                    field:'upgradeinstructions',
                    title:'升级内容'
                },
                ]
            });


            $(window).resize(function () {
                $table.bootstrapTable('resetView', {height:getHeight()});
            });
           $table.on('check.bs.table uncheck.bs.table ' +
                'check-all.bs.table uncheck-all.bs.table', function () {
                $('#remove').prop('disabled', !$table.bootstrapTable('getSelections').length);
                oTableInit.selections = oTableInit.getIdSelections();
            });
        };

        //参数
        oTableInit.mailListQueryParams = function(params){
            var temp = {
                limit:params.limit,
                offset:params.offset,
                search:params.search,
                // group_code:group_code,
            };
            return temp;
        };
        oTableInit.getIdSelections = function(){
            return $.map($table.bootstrapTable('getSelections'), function (row) {
                return row.version_upgrade_id;
            })
        };
        oTableInit.refresh = function(){
            $table.bootstrapTable('refresh');
        };
        return oTableInit;
    }
    //table end
    // 验证
    function initValidate(){
        $('#createVersion').validate({
            submitHandler:function (form) {
                if ($('#downloadPath').val() == '') {
                    layer.tips('您没有选择上传文件哦', '.dropper-dropzone', {
                      tips: [2, '#3595CC'],
                      time: 1500
                    });
                    return false;
                }
                if ($('#upgradeInstructions').val() == '') {
                    $('#upgradeInstructions').val('修复了若干bug');
                }
                var url = $(form).prop('action');
                var postData = $(form).serialize();
                    postData += '&platform=2';
                $.post(url,postData, function(data){
                    if(data.status == 1){
                        layer.msg('添加成功');
                        form.reset();
                        clearImageView();
                        $complex_modal.modal('hide');
                        $table.bootstrapTable('refresh');
                    }else{
                        layer.msg(data.msg);
                    }
                });
            },
            rules:{
                version_code:"required",
                versionName:"required",
            },
            messages:{
                version_code:"请填写版本号",
                versionName:'请填写APP显示名称',
            }
        });
    }
    function getHeight(){
        return $('#right').height() - 30;
    }

    $(function(){
        initDropper();
        // 初始化table
        var oTable = new TableInit();
        oTable.init();
        initValidate();
        // 删除按钮
        $('#remove').click(function () {
            // delMailList = true;
            $("#confirm_modal").modal('show');
        });
        // 删除界面操作 - 删除
        $confirmDel.click(function () {
            $("#confirm_modal").modal('hide');
                $.post({
                    url:"{:U('delete')}",
                    data:{
                        selectedIds : oTable.selections
                    },
                    success:function(data){
                        if(data.status == 1){
                            layer.msg('删除成功');
                            $table.bootstrapTable('refresh');
                        }else{
                            layer.msg('删除失败');
                        }
                    }
                })
        });
        $('#import').click(function () {
            clearImageView();
           $complex_modal.modal('show');
        });
    });
    </script>
</block>